<template>
	<view class="content" style="background: none;">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block style="color: #777777;font-size: 32rpx;" slot="content">企业详情</block>
		</cu-custom>
		<!-- config-echarts.js中的seriesTemplate为option.series模板，可以作为series中的默认配置，:chartData.series中的配置如果有相同的，会覆盖掉 seriesTemplate 中的配置 -->
		<view class="bg-white" style="background: none;">
			<view class="flex">
				<view class="flex-sub bg-grey radius my-b bg0">
					<view class="circle">
						<text style="color: #458DF5" class="cuIcon-shebeizongshu icon"></text>
					</view>
					<text class="title">设备总数</text>
					<text class="num">{{ deviceTotal }}</text>
				</view>
				<view class="flex-sub bg-grey radius my-b bg1">
					<view class="circle">
						<text style="color: #FABD50" class="cuIcon-renwulingqu icon"></text>
					</view>
					<text class="title">任务领取率</text>
					<text class="num">{{ taskRate }}</text>
				</view>
			</view>
			<view class="flex">
				<view class="flex-sub bg-grey radius my-b bg2">
					<view class="circle">
						<text style="color: #FF5A5A" class="cuIcon-yonghuzongshu icon"></text>
					</view>
					<text class="title">用户总数</text>
					<text class="num">{{ userTotal }}</text>
				</view>
				<view class="flex-sub bg-grey radius my-b bg3">
					<view class="circle">
						<text style="color: #45D256" class="cuIcon-zaixianyonghushu icon"></text>
					</view>
					<text class="title">在线用户数</text>
					<text class="num" :class="onlineClass">{{ onlineTotal }}</text>
				</view>
			</view>
		</view>


		<view class="bg-white mar-top">
			<view class="flex solid-bottom justify-around">
				<view class="padding-sm margin-xs radius">
					<button style="border: 1px solid #FABD50;" :class="xz" @click="xfsb">消防设备</button>
				</view>
				<view class="padding-sm margin-xs radius">
					<button style="border: 1px solid #FABD50;" :class="wxz" @click="wlwsb">物联网设备</button>
				</view>
			</view>
		</view>

		<view class="bg-white" style="height: 500rpx;">
			<!-- 演示动态改变eopts -->
			<qiun-data-charts type="ring" :opts="opts" :eopts="ringOpts" :chartData="chartsDataPie2" :echartsH5="true"
				:echartsApp="true" />
		</view>

		<view class="content" style="background-color: #fff;">
			<ul>
				<li>
					<text class="list-info">企业名称：</text>
					<text class="list-title">{{ enterpriseName || '暂无' }}</text>
				</li>
				<li>
					<text class="list-info">负责人：</text>
					<text class="list-title">{{ contacts || '暂无' }}</text>
				</li>
				<li>
					<text class="list-info">负责人电话：</text>
					<text class="list-title">{{ mobile || '暂无' }}</text>
				</li>
				<li>
					<text class="list-info">省市县：</text>
					<text class="list-title">{{ provinceCityCountry || '暂无' }}</text>
				</li>
				<li>
					<text class="list-info">详细地址：</text>
					<text class="list-title">{{ address || '暂无' }}</text>
				</li>
			</ul>
		</view>

		<map class="my-map" :latitude="latitude" :longitude="longitude" :markers="covers">
		</map>

		<message />
	</view>
</template>

<script>
export default {
	onLoad(option) {
		// 封装参数
		let params = {
			"enterpriseId": option.ucId
		}
		let that = this
		// 请求数据
		let app = getApp()
		app.globalData.request({
			url: 'wx/inspect/getEnterpriseDetail/' + option.ucId,

		}).then(function (res) {
			console.info(res)
			that.deviceTotal = res.data.data.deviceTotal
			that.taskRate = res.data.data.taskRate
			that.userTotal = res.data.data.userTotal
			that.onlineTotal = res.data.data.onlineTotal
			let percent = that.onlineTotal / that.userTotal
			if (percent < 0.5) {
				that.status = 1
				that.onlineClass = 'state-red'
			} else if (0.5 <= percent < 0.8) {
				that.status = 2
				that.onlineClass = 'state-yellow'
			} else if (percent >= 0.8) {
				that.status = 3
				that.onlineClass = 'state-green'
			}
			that.enterpriseName = res.data.data.enterpriseName
			that.contacts = res.data.data.contacts
			that.mobile = res.data.data.mobile
			that.provinceCityCountry = res.data.data.provinceCityCountry
			that.address = res.data.data.address

			that.latitude = res.data.data.latitude
			that.longitude = res.data.data.longitude
			that.fireDeviceData = res.data.data.fireDevice
			that.iotdeviceData = res.data.data.iotdevice
			that.covers = [{
				id: Math.ceil(Math.random() * 100),
				label: {
					content: that.enterpriseName,
					fontSize: 12,
				},
				width: 32,
				height: 32,
				latitude: that.latitude,
				longitude: that.longitude,
				iconPath: ''
			}]
			that.xfsb()
		}).catch(function (e) {

		})
	},
	chartsDataPie2: {
		"series": [{
			"data": []
		}]
	},

	data() {
		return {
			wxz: "cu-btn round bg-white",
			xz: "cu-btn round bg-system-orange",
			deviceTotal: '',
			taskRate: '',
			userTotal: '',
			onlineTotal: '',
			enterpriseName: '',
			contacts: '',
			mobile: '',
			provinceCityCountry: '',
			address: '',
			chartsDataPie2: {
				"series": [{
					"data": [{}],
				}]
			},
			status: 1,
			onlineClass: '',
			fireDeviceData: [],
			iotdeviceData: [],
			latitude: '',
			longitude: '',
			covers: [],
			opts: {
				"type": "ring",
				"padding": [5, 5, 5, 5],
				"rotate": false,
				"dataLabel": true,
				"legend": {
					"show": true,
					"position": "top",
					"float":'left',
					// "lineHeight": 25,
				},
				"title": {
					"name": "",
					"fontSize": 15,
					"color": "#666666"
				},
				"subtitle": {
					"name": "",
					"fontSize": 25,
					"color": "#7cb5ec"
				},
				"extra": {
					"ring": {
						"customRadius": 60,
						"ringWidth": 20,
						"activeOpacity": 0.5,
						"activeRadius": 10,
						"offsetAngle": -90,
						"labelWidth": 15,
						"border": true,
						"borderWidth": 3,
						"borderColor": "#FFFFFF"
					},
				},
			},
			ringOpts: {


			},

		};
	},
	onReady() {

	},
	methods: {
		xfsb() {
			this.wxz = "cu-btn round bg-white"
			this.xz = "cu-btn round bg-system-orange"
			let data = {
				"series": [{
					"data": this.fireDeviceData
				}]
			}
			console.log(data)
			this.chartsDataPie2 = JSON.parse(JSON.stringify(data))
		},
		wlwsb() {
			this.xz = "cu-btn round bg-white"
			this.wxz = "cu-btn round bg-system-orange"
			let data = {
				"series": [{
					"data": this.iotdeviceData
				}]
			}
			console.log(data)
			this.chartsDataPie2 = JSON.parse(JSON.stringify(data))
		},
	}
};
</script>

<style>
	.mar-top {
		margin-top: 10px;
	}
.my-b {
	height: 150rpx;
	border-radius: 28rpx;
	border-radius: 28rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	margin: 10rpx 10rpx;
}

.bg0 {
	margin:10rpx  30rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: rgba(69, 141, 245, .25);
}

.bg1 {
	margin: 10rpx 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: rgba(250, 189, 80, .25);
}

.bg2 {
	margin:10rpx  30rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 90, 90, .25);
}

.bg3 {
	margin:10rpx  30rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: rgba(80, 250, 100, .25);
}

.circle {
	width: 70rpx !important;
	height: 70rpx !important;
	background: #fff;
	border-radius: 50% !important;
	text-align: center;
	line-height: 70rpx;
}

.icon {
	font-size: 20px;
	padding-left: 0 !important;
}

.bg_pic {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	background-color: #FFFFFF;
	margin-top: 41rpx;
}

.title {
	margin-top: 5rpx;
	font-size: 12px;
	color: #333333;
}

.num {
	font-size: 12px;
	color: #333333;
}

.content {
	margin-top: 24rpx;
	background-color: #FFFFFF;
}

ul li {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-left: 24rpx;
	position: relative;
}

li text {
	font-size: 24rpx;
}

li::after {
	content: '';
	position: absolute;
	left: 2rpx;
	bottom: 0;
	right: 2rpx;
	height: 1px;
	background-color: #dcdcdc;
}

.my-map {
	width: 100%;
	margin: 40rpx 0;
}
</style>
